<template>
  <div class="input-text-div">
    <label class="input-text-lable">{{ inputLable }}</label>：
    <div class="input-display-div" v-on:click="clickSelect($event)"><input class="input-text-input" ref="input-ref" disabled="disabled" :type="inputType"></div>
    <input class="input-text-real-input" ref="input-real-ref" :type="inputType" :name="inputName">
  </div>
</template>

<script>
import {validatorFunction} from "@/validate";

export default {
  name: "SelectInputComponent",
  methods:{
    getInputValue(){
      if(this.validateValue){
        let name = this.inputName;
        return { "validate":true, "name":name , "value" : this.$refs["input-ref"].value };
      }else{
        return { "validate":false };
      }
    },
    clickSelect(event){
      this.selectFunction(event,this);
    },
    validateValue(){
      let validateExcute = validatorFunction[this.validate];
      if (null != validateExcute) {
        let val = this.$refs["input-ref"].value;
        let validateResult = validateExcute.call(validateExcute,val);
        this.$refs["err-msg"].innerText = validateResult;
        if ("" !== validateResult) {
          this.$refs["input-ref"].style["background"] = "#f00";
          this.$refs["input-ref"].style["filter"] = "Alpha(Opacity=30)";
          this.$refs["input-ref"].style["opacity"] = "0.3";
          return false;
        }else{
          this.$refs["input-ref"].style["background"] = "#eee";
          this.$refs["input-ref"].style["filter"] = "Alpha(Opacity=100)";
          this.$refs["input-ref"].style["opacity"] = "1.0";
          return true;
        }
      }
    },
    setSelectedValue(object){
      this.$refs["input-ref"].value = object["display"];
      this.$refs["input-real-ref"].value = object["value"];
    }
  },
  props:{
    inputLable:String,
    inputName:String,
    inputType:String,
    selectFunction:Function,
    validate:{
      type:String,
      default:()=>{
        "allTrue"
      }
    },
  },
  mounted() {
    this.$parent.$emit("inputRegist",this.inputName,this);
  },
  destroyed() {
    this.$parent.$emit("inputUnRegist",this.inputName);
  }
}
</script>

<style scoped>
.input-text-div{
  display: inline-block;
  width: 320px;
  padding-right: 20px;
  padding-bottom: 15px;
  text-align: right;
}

.input-text-lable{
  font-size: smaller;
}

.input-text-input{
  height: 25px;
  width: 200px;
  border: 1px #bbbbbb solid;
  background: #eeeeee;
  border-radius: 5px;
}
.input-text-real-input{
  display: none;
}
.input-display-div{
  display: inline;
}
</style>